<template>
    <div class="cart-bottom-bar">
        <div class="button">
            <check-button :isChecked="isSelectAll" @click.native="buttonClick"></check-button>
            <span>全选</span>
        </div>
        <div>
            合计 {{totalPrice}}
        </div>
        
        <div class="count" @click="calcClick">
            <!-- <span> -->
                去计算 ({{checkLength}})
            <!-- </span> -->
            
        </div>

    </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'

// 可将getters里的方法转成计算属性, 需导入
import {mapGetters} from 'vuex'

export default {
    components: {
        CheckButton

    },
    computed: {
        ...mapGetters(['cartList']),
        totalPrice() {
            return '￥' + this.cartList.filter(item => item.checked === true)
            .reduce((prev, item) => prev + item.price * item.count, 0).toFixed(2)
        },

        checkLength() {
            return this.cartList.filter(item => {
                return item.checked === true
            }).length
        },
        isSelectAll() {
            if (this.cartList.length === 0) return false
            // 1.
            // return !this.cartList.find(item => !item.checked)
            // 2.
            // return !(this.cartList.filter(item => !item.checked).length)
            // 3. 最方便
            return this.cartList.every(item => item.checked)
            // 4.
            // return !this.cartList.some(item => !item.checked)
            // 5.
            // for (let item of this.cartList) {
            //     if (!item.checked){
            //         return false
            //     }
            // }

            // return true

            // 6. forEach没有返回值，return不执行，只会执行底下的true
            // this.cartList.forEach(item => {
            //     if (!item.checked) {
            //         return false
            //     }
            // })
            
            // return true
        }
    },
    methods: {
        buttonClick(){
            // if (this.isSelectAll) { // 全部选中
            //     this.cartList.forEach(item => item.checked = false)
                    
            // } else { // 全部不选中或部分选中
            //     this.cartList.forEach(item => item.checked = true)        
            // }
            // 用一个变量保存isSelectAll, 防止遍历时有单个不选中时，影响isSelectAll的值
            const a = this.isSelectAll
            this.cartList.forEach(item => item.checked = !a)
        },
        calcClick() {
            if (!this.isSelectAll) {
                this.$toast.show('请选中全部的商品')                
            }
            
        }
    }
}
</script>


<style scoped>
    .cart-bottom-bar{
        display: flex;
        height: 40px;
        background: rgb(226, 201, 201);
        position: relative;
        /* bottom: 40px; */
        align-items: center;
        justify-content: space-between;
        background: #eee;
        line-height: 40px;
    }

    .button{
        display: flex;
        margin-left: 8px;
        /* align-items: center; */
    }

    .button span{
        margin-left: 6px;
    }

    .count{
        
        padding: 0 20px;
        background: red;
        color: #fff;
    }
</style>